<template>
  <div class="container hh-login" style="min-height: 1080px; height: auto">
    <header>
      <div class="top gr">
        <div class="ct af">
          <!--<p>{{msg}}!</p>-->
          <!--<a href="javascript:;">服务者注册</a>-->
          <!--<a href="javascript:;">服务者登录</a>-->
          <div class="lf">
            <a class="a1" href="https://www.qiyebang.net.cn/">企业邦首页</a>
            <a class="a2" href="javascript:;">北京</a>
          </div>
          <div class="rt">
            <a href="javascript:;" class="a3">{{title.gr?title.gr.username:'用户名'}}<span></span></a>
            <a href="/PersonalCenter" class="a4">个人中心</a>
            <a href="/PersonalCenter/wallet" class="a5">我的订单</a>
            <a href="/" class="a6">网站首页</a>
          </div>
        </div>
      </div>
      <div class="content">
        <div class="ct af gr">
          <h1 alt="企业邦（北京）创业服务有限公司"><a href="https://www.qiyebang.net.cn" ><img src="~/assets/img/logo.png" width="309px" height="46px"></a></h1>
          <div class="ss" @click="zkss" >
            <input type="text" placeholder="搜索所需服务，如公司注册" readonly="readonly"><a href="javascript:;">确定</a>
            <ul class="searchs" >
              <li v-for="(dt,id) in title.nav.oneTwoServiceData[0].twoServiceRes"><a :href="'/ServiceDetails/'+dt.id+'?name='+dt.id" target="_blank">{{dt.servicename}}</a></li>
              <li v-for="(dt,id) in title.nav.oneTwoServiceData[1].twoServiceRes"><a :href="'/ServiceDetails/'+dt.id+'?name='+dt.id" target="_blank">{{dt.servicename}}</a></li>
              <li v-for="(dt,id) in title.nav.oneTwoServiceData[2].twoServiceRes"><a :href="'/ServiceDetails/'+dt.id+'?name='+dt.id" target="_blank">{{dt.servicename}}</a></li>
              <li v-for="(dt,id) in title.nav.oneTwoServiceData[3].twoServiceRes"><a :href="'/ServiceDetails/'+dt.id+'?name='+dt.id" target="_blank">{{dt.servicename}}</a></li>
              <li v-for="(dt,id) in title.nav.oneTwoServiceData[4].twoServiceRes"><a :href="'/ServiceDetails/'+dt.id+'?name='+dt.id" target="_blank">{{dt.servicename}}</a></li>
            </ul>
          </div>
          <div class="rt">
            <a href="/PersonalCenter" class="a3 select">个人中心首页</a>
            <a href="/Mall" class="a4">我要购买</a>
            <a href="/PersonalCenter/Wallet" class="a5">我的钱包</a>
            <a href="javascript:;" @click="tc('userinfoRes','',-1)" class="a6">退出</a>

          </div>
        </div>
      </div>
    </header>
    <div class="divmc"></div>
    <div class="hh-zssc select">
      <h3>展示位商城</h3>
      <p class="hp">注：每个展示位有效期为5天，购买成功后，无法取消或更换广告位。</p>


		<div class="chj_zswsc_top_com">
		   <ul class="chj_zswsc_top_list af">
		   	<li v-for="(i,index) in 4" :class="'li'+index" :key="index">
		       <div class="top_bj1 af">
					<div class="le">
						<p class="p1">{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[index].servicename:''}}</p>
						<p class="p2" @click="shouc(title.id,title.gj.oneTwoServiceData[index].id)">收藏</p>
					</div>
					<div class="ri">
						<div>
							<h5 class="num">{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[index].buyneedscore:''}}</h5>
							<p class="int">积分</p>
						</div>
					</div>
		       </div>
		       <div class="bottom">
		         <p>{{title.gj.oneTwoServiceData[index].servicename}}广告位购买{{title.gj.oneTwoServiceData[index].buyneedscore}}积分</p>
		         <a href="javascript:;" @click="dkgm(title.id,title.gj.oneTwoServiceData[index].id)">立即购买</a>
		       </div>
		     </li>
		   </ul>
		</div>




      <div class="sct1 sct af">
        <div class="lf">
          <h4>{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[0].servicename:''}}</h4>
          <ul class="af">
            <li v-for="(data,i) in title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[0].twoServiceRes:[]" class="li" :class="i==0?'select':''" @mouseover="qh(1,i)"><a
              href="javascript:;">{{data.servicename}}</a>
              </li>
          </ul>
        </div>
        <div class="rt">
          <ul class="af">
            <li class="li1" v-for="(data,id) in title.gj.oneTwoServiceData?loadList3(title.gj.oneTwoServiceData[0].twoServiceRes[shuju1.one].id):[]" :class="'li'+id" :key="id">

              <div>
                <h5>{{data.servicename}}</h5>
                <!-- {{data}} -->
                <p class="p1">积分：<span>{{data.buyneedscore}}</span></p>
                <p class="p2" @click="shouc(title.id,data.id)" :class="loadList2(data.id)==1?'sc':''">收藏</p>

              </div>
              <a href="javascript:;" @click="dkgm(title.id,data.id)">立即购买</a>
            </li>
          </ul>
        </div>

      </div>
      <div class="sct2 sct af">
        <div class="lf" >
          <h4>{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[1].servicename:''}}</h4>
          <ul class="af" >
            <li v-for="(data,i) in title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[1].twoServiceRes:[]" class="li" :class="i==0?'select':''" @mouseover="qh(2,i)"><a
              href="javascript:;">{{data.servicename}}</a></li>
          </ul>
        </div>
        <div class="rt">
          <ul class="af">
            <li class="li1" v-for="(data,id) in title.gj.oneTwoServiceData?loadList3(title.gj.oneTwoServiceData[1].twoServiceRes[shuju1.two].id):[]" :class="'li'+id" :key="id">
              <div>
                <h5>{{data.servicename}}</h5>
                <p class="p1">积分：<span>{{data.buyneedscore}}</span></p>
                <p class="p2" @click="shouc(title.id,data.id)" :class="loadList2(data.id)==1?'sc':''">收藏</p>

              </div>
              <a href="javascript:;" @click="dkgm(title.id,data.id)">立即购买</a>
            </li>
          </ul>
        </div>

      </div>
      <div class="sct3 sct af">
        <div class="lf">
          <h4>{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[2].servicename:''}}</h4>
          <ul class="af" >
            <li v-for="(data,i) in title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[2].twoServiceRes:[]" class="li" :class="i==0?'select':''" @mouseover="qh(3,i)"><a
              href="javascript:;">{{data.servicename}}</a></li>
          </ul>
        </div>
        <div class="rt">
          <ul class="af" >
            <li class="li1" v-for="(data,id) in title.gj.oneTwoServiceData?loadList3(title.gj.oneTwoServiceData[2].twoServiceRes[shuju1.three].id):[]" :class="'li'+id" :key="id">
              <div>
                <h5>{{data.servicename}}</h5>
                <p class="p1">积分：<span>{{data.buyneedscore}}</span></p>
                <p class="p2" @click="shouc(title.id,data.id)" :class="loadList2(data.id)==1?'sc':''">收藏</p>

              </div>
              <a href="javascript:;" @click="dkgm(title.id,data.id)">立即购买</a>
            </li>
          </ul>
        </div>

      </div>
      <div class="sct4 sct af">
        <div class="lf">
          <h4>{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[3].servicename:''}}</h4>
          <ul class="af" style="min-height: 200px;background-position-y:100px">
            <li v-for="(data,i) in title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[3].twoServiceRes:[]" class="li" :class="i==0?'select':''" @mouseover="qh(4,i)"><a
              href="javascript:;">{{data.servicename}}</a></li>
          </ul>
        </div>
        <div class="rt">
          <ul class="af">
            <li class="li1" v-for="(data,id) in title.gj.oneTwoServiceData?loadList3(title.gj.oneTwoServiceData[3].twoServiceRes[shuju1.four].id):[]" :class="'li'+id" :key="id">
              <div>
                <h5>{{data.servicename}}</h5>
                <p class="p1">积分：<span>{{data.buyneedscore}}</span></p>
                <p class="p2" @click="shouc(title.id,data.id)" :class="loadList2(data.id)==1?'sc':''">收藏</p>
              </div>
              <a href="javascript:;" @click="dkgm(title.id,data.id)">立即购买</a>
            </li>
          </ul>
        </div>

      </div>
<!--      <div class="sct5 sct af">
        <div class="lf">
          <h4>{{title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[4].servicename:''}}</h4>
          <ul class="af" >
            <li v-for="(data,i) in title.gj.oneTwoServiceData?title.gj.oneTwoServiceData[4].twoServiceRes:[]" class="li" :class="i==0?'select':''" @mouseover="qh(5,i)"><a
              href="javascript:;">{{data.servicename}}</a></li>
          </ul>
        </div>
        <div class="rt">
          <ul class="af">
            <li class="li1" v-for="(data,id) in title.gj.oneTwoServiceData?loadList3(title.gj.oneTwoServiceData[4].twoServiceRes[shuju1.five].id):[]" :class="'li'+id" :key="id">
              <div>
                <h5>{{data.servicename}}</h5>
                <p class="p1">积分：<span>{{data.buyneedscore}}</span></p>
                <p class="p2" @click="shouc(title.id,data.id)" :class="loadList2(data.id)==1?'sc':''">收藏</p>
              </div>
              <a href="javascript:;" @click="dkgm(title.id,data.id)">立即购买</a>
            </li>
          </ul>
        </div>
      </div> -->
    </div>
    <my-ft style="padding-top: 30px"></my-ft>

    <div class="tc">
      <span>×</span>
      {{tcmsg}}
    </div>
    <div class="gmtc" :class="goumai.select==0?'':'select'">
      <div class="ct">
        <h3>{{goumai.title}}(展示位)</h3>
        <p class="p1"><span>{{goumai.jifen}}</span>积分</p>
        <p class="p2">{{goumai.title}}(展示位)</p>
        <p class="p3">当前拥有积分:{{goumai.userjf}}</p>
        <a href="javascript:;" class="ljgm" @click="gmjf(title.id,goumai.id)">立即购买</a>
        <a href="javascript:;" class="close" @click="gmgb()"></a>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import $ from 'jquery';
  export default {
    name: 'HelloWorld',
    data () {
      return {
        id:'',
        nihao:'你好呀',
        tcmsg:'',
        tcmsg1:['收藏成功',''],
        tcmsg2:'取消收藏成功',
        selenv:false,
        grzx:{
          bj:'编辑'
        },
        title:null,
        fuwu:1,
        shuju1:{
          one:0,
          two:0,
          three:0,
          four:0,
          five:0
        },
        goumai:{
          title:'',
          jifen:0,
          userjf:0,
          select:0,
          id:0
        }
      }
    },
    async asyncData ({req, params}){
      let a = req.headers.cookie;
      let cookie = '';
     if(a.indexOf('userinfoRes')!=-1){
       let b = a.split('userinfoRes=');
       let c = b[1].split(';');
       cookie = c[0];
      }
      let a3 = 'https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+cookie;
      let a4 = 'https://exam.zhonghaiqihang.com/PInterface/UserCenter/userCenterIndexData?userid='+cookie;
      let nh = await axios.get(`https://exam.zhonghaiqihang.com/PInterface/Header/headerData`);
      let nh4 = await axios.get(a3);
      let nh5 = await axios.get(a4);

      let data  = {nav:nh.data,gj:nh4.data,id:cookie,gr:nh5.data};
      return { title: data}
  },

  mounted:function(){
  console.log(this.title)
    $('.tbnava1').addClass('select');
    $('header .content .rt a').removeClass('select');
    $('header .content .rt a.a4').addClass('select');
    $(document).ready(function () {
      $('.htcfw').hide();
    });
    function setCookie(cname,cvalue,exdays)
    {
      var d = new Date();
      d.setTime(d.getTime()+(exdays*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    if(this.title.gj == 'go_signin'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }else if(this.title.gj == 'userid_error'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }else if(this.title.gj == 'userinfo_is_null'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }else if(this.title.gj == 'userinfo_banuse'){
      this.$router.push('/Login');
      setCookie('userinfoRes','',-1);
    }
    else if(this.title.gj == 'serviceid_is_null'){
      window.open('/Mall',_self);
    } else if(this.title.gj == 'serviceid_error'){
      window.open('/Mall',_self);
    }else if(this.title.gj == 'serviceinfo_is_null'){
      window.open('/Mall',_self);
    }else if(this.title.gj == 'serviceinfo_banuse'){
      window.open('/Mall',_self);
    }
    var _this = this;
    _this.$axios.get('https://exam.zhonghaiqihang.com/'+'/PInterface/UserCenter/userCenterIndexData',{
      params:{
        num:_this.title.id
      }
    })
      .then(function(response){
        if(response == 'go_signin'){
          setCookie('userinfoRes','',-1);
         _this.$router.push('/');

        }else if(response=='userid_error'){
          setCookie('userinfoRes','',-1);
          _this.$router.push('/');
        }else if(response=='serviceid_error'){
          setCookie('userinfoRes','',-1);
          window.open('/PersonalCenter/','_self');
        }else if(response == '收藏成功'){
          _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+_this.title.id)
            .then(function(response){
            });
        }

      });

    $(document).ready(function(){
      $('.hh-xgzl .div .bj').click(function(){
        $(this).toggleClass('select');
        $(this).siblings('strong').toggleClass('select');
        $(this).parent().siblings('.ycd').toggleClass('select');
        $(this).parent().siblings('.tx').toggleClass('select');
        if($(this).text()=='编辑'){
          $(this).html('展开<i></i>');
        }else if($(this).text()=='展开'){
          $(this).html('编辑<i></i>');
        }
      });
      $('.hh-zssc .sct li').hover(function(){
        $(this).siblings().removeClass('select');
        $(this).addClass('select');
      });

      $('.hh-xgzl .div .bc').click(function(){
        $(this).parent().parent().children('strong').removeClass('select');
      });



    })
  },
  computed: {
    loadList() {
      return (type) => {
        let newData = [];
        this.title.nav.threeServiceData.forEach(item => {
          if(item.pid == type) {
          newData.push(item);
        }
      });
        return newData;
      };
    },
    loadList3() {
      return (type) => {
        let newData = [];
        this.title.gj.threeServiceData.forEach(item => {
          if(item.pid == type) {
          newData.push(item);
        }
      });
        return newData;
      };
    },
    loadList2() {
      return (type) => {
        let newData = '';
        if(this.title.gj['collectServiceData']){
          this.title.gj['collectServiceData'].forEach(item => {
            if(item == type) {
            newData = 1;
          }
          });
        }
        return newData;
      };
    }
  }
  ,head () {
    return {
      title: '展示位管理-企业邦',
      meta: [
        { hid: 'description', name: 'description', content: '展示位管理-企业邦' },
        { hid: 'keywords', name: 'keywords', content:'展示位管理-企业邦'}
      ]
    }
  }
  ,
  methods:{
    tzlj:function(e){
      // const new3 = this.$router.resolve({name: e});
      // window.open(new3.href,'_self');
      this.$router.push('/'+e);
    },
    tzlj1:function(e){
      // const new3 = this.$router.resolve({name: this.dhlj[e]});
      // window.open(new3.href,'_self');
      this.$router.push(e);
    },
    tc:function(e1,e2,e3){
      var d = new Date();
      d.setTime(d.getTime()+(e3*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = e1 + "=" + e2 + "; " + expires;
      this.$router.push('/');
    },
    xqymtz:function(e1,e2){
      let href = '/ServiceDetails/'+e1+'?name='+e2;
      window.open(href,'_blank');
    },zkss:function(){
      $('.searchs').toggleClass('select');
    },
    qh:function(e1,e2){
      if(e1==1){
        this.shuju1.one =e2;
      }else if(e1==2){
        this.shuju1.two =e2;
      }else if(e1==3){
        this.shuju1.three =e2;
      }else if(e1==4){
        this.shuju1.four =e2;
      }else if(e1==5){
        this.shuju1.five =e2;
      }
    },
    gmgb:function(){

      this.goumai.select = 0;
    },
    dkgm:function(e1,e2){
      var _this = this;
      this.goumai.select = 1;
      _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/showNumBuyData',{
        params:{
          userid:e1,
          serviceid:e2
        }
      })
        .then(function(response){
          _this.goumai.title = response.data.servicename;
          _this.goumai.jifen = response.data.buyneedscore;
          _this.goumai.userjf = response.data.userscore;
          _this.goumai.id = e2;


        });

    },
    gmjf:function(e1,e2){
      var _this = this;
      var sj;
      sj = 'userid='+e1+'&serviceid='+e2;
      _this.$axios.post('/api'+'/PInterface/UserCenter/showNumBuyOperation',sj)
        .then(function(response){
          _this.goumai.select = 0;
          // alert(response.data);
          _this.tcmsg= response.data;
          $('.hh-login .tc').addClass('select');
          setTimeout(function(){//your codes
            window.location.reload()
          },800);


        });
    },
    shouc:function(e1,e2){

       var _this = this;
      function setCookie(cname,cvalue,exdays)
      {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
      }
      _this.$axios.post('api/PInterface/UserCenter/collectOperation','userid='+e1+'&serviceid='+e2
      )
        .then(function(response){
          // _this.xianqu = response.data;

          if(response.data == 'go_signin'){
            setCookie('userinfoRes','',-1);
            _this.$router.push('/');

          }else if(response.data=='userid_error'){
            setCookie('userinfoRes','',-1);
            _this.$router.push('/');
          }else if(response.data=='serviceid_error'){
            setCookie('userinfoRes','',-1);
            window.open('/PersonalCenter/','_self');
          }else if(response.data== '收藏成功'){
            _this.tcmsg= '收藏成功';
            $('.hh-login .tc').addClass('select');
            $('.tc').fadeIn(0);
            $('.tc').fadeOut(2500);
            _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+_this.title.id)
              .then(function(response){
                _this.title.gj = response.data;

              });
          }else if(response.data== '取消收藏成功'){
            $('.hh-login .tc').addClass('select');
            _this.$axios.get('https://exam.zhonghaiqihang.com/PInterface/UserCenter/serviceData?userid='+_this.title.id)
              .then(function(response){
                _this.title.gj = response.data;
                _this.tcmsg= '取消收藏成功';
                $('.hh-login .tc').addClass('select');
                $('.tc').fadeIn(0);
                $('.tc').fadeOut(2500);
              });
          }

        });


    }
  }
  }
</script>

<style>

</style>
